<template>
        <div class="mui-content mui-scroll-wrapper">
            <header class="mui-bar mui-bar-nav bg-color">
                <span class="mui-pull-left Tit" id="allremove"  @tap="allsel">{{selMsg}}</span>
                <!--标题-->
                <h1 class="mui-title" >关注车型</h1>
                <span class="mui-pull-right Tit" @tap="gtolast">取消</span>
            </header>
            <!-- 热门资讯 -->
            <div class="mui-scroll">
                <div class="info-list">
                    <div class="info-tab">
                        <div class="tab-item"  v-for="(v,i) in attentList" :style="{ 'border-top': !i? 'none' : '1px solid #F0F0F0'}">
                            <div class="tab-item-left">
                                <p style="height:40px;font-size:0.65rem;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow:hidden;">{{v.carName}}</p>
        
                                <p><span style="color:#DF7467;">厂商指导价:{{v.guidePrice}}万起</span></p>
                            </div>
                            <div class="tab-item-right" v-if="v.seriesPic==null">
                                <img v-lazy="noCarPic">
                            </div>

                            <div class="tab-item-right" v-else>
                                <img  v-lazy="$store.state.appData.imgUrl+v.seriesPic">
                            </div> 
                            <div class="tab-item-ipt">
                                <a class="mui-checkbox mui-left">
                                    <input name="checkbox" :value="v.carId" type="checkbox" v-model="carIds"  style="left:0px;top:25px;">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
            <!--删除-->
            <div class="affirm">
                <div class="afm" :style="{'background':carIds.length?'#ff6a27':'#b2b2b2'}" @tap="clearAttent()">删除</div>
            </div>     
        </div>  
</template>

<script>
    import mui from 'static/js/mui.js'
    import { getAllcarAttention,removeListcarAttention} from '@/api/carAttention'
     export default {
        components: {},
        data() {
            return{
                noCarPic:'static/img/noCarPic.png',
                selMsg:"全选",
                //ajax拿过来的数据
                attentList:[
                ],
                //通过双向绑定拿过来的carId数组 删除的时候传参用
                carIds:[]
            }
        },
        props: {},
        watch: {
            carIds:{ // 监视双向绑定的数组变化
                handler(){
                    //判断双向绑定后的carIds数组是否与ajax的拿过来所有关注的集合是否相等  相等说明都被选中了跳出全不选
                    if(this.carIds.length > 0){
                        this.selMsg="全不选"
                    //不相等说明部分没有选中 则变为全选功能
                    }else {
                        this.selMsg="全选"
                    }
                },
                deep:true//深度监视
            }
        },
        methods: {
            //删除已选的关注车型
            clearAttent(){
                // //console.log(this.carIds)
                if(this.carIds.length>0){
                    removeListcarAttention({customerId:this.$store.getters.user.id,"carIds":this.carIds}).then(resp => {
                        if(resp.msg=="success"){
                            var ch=document.getElementsByName("checkbox");
                            for(var i=0;i<ch.length;i++){
                                ch[i].checked=false
                                this.carIds.splice(0,1)//每次删除数组的第一个元素
                            }
                            this.getAllcarAtn()//删除过后 继续请求关注接口  获取所有关注车型
                        }else{
                            alert("删除关注车型 接口不通")
                        }
                    })
                }
            },
            //全选 or 全不选
            allsel(){
                if(this.selMsg==="全选"){//如果是全选  则全部选 并且循环放入carIds 是数组中去
                    var ch=document.getElementsByName("checkbox");
                    for(var i=0;i<ch.length;i++){
                        ch[i].checked=true
                        //判断数组中是否已经存在此元素
                        if(this.carIds.indexOf(Number(ch[i].value)) == '-1'){ 
                            this.carIds.push(Number(ch[i].value))
                        }
                    }
                }
                if(this.selMsg==="全不选"){//如果是全选  则全部不选 并且循环删除数组元素
                    var ch=document.getElementsByName("checkbox");
                    for(var i=0;i<ch.length;i++){
                        ch[i].checked=false
                        this.carIds.splice(0,1)//每次删除数组的第一个元素
                    }
                }
            },
            //返回上一层
            gtolast(){
              this.$router.go(-1);//返回上一层
            },
            // 获取所有关注车型
            getAllcarAtn(){
                getAllcarAttention({customerId:this.$store.getters.user.id,"pageNow":1,
    "pageSize":1000}).then(resp => {
                    // commit("getcarAtation",resp);
                    if(resp.data.attentionCars.length==0){//请求的数据关注数组长度为0的话 则跳转回关注主页面
                        this.$router.push({
                            path: "/attent",
                        })
                    }else{//长度不为0时则渲染数据
                        this.attentList=resp.data.attentionCars
                    }
                })
            }
        },
       
        created() {
             this.getAllcarAtn()
        },
        mounted() {
            mui.init()
            //竖向滚动
            scroll = mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: false, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: false //是否启用回弹
            })
        },
        destroyed() { }
    }


</script>

<style lang="scss" scoped>
    .mui-checkbox input[type="checkbox"]:checked:before {
        color: #ff6a27;
    }


    .Tit{
        line-height: 43px;
        font-size: 0.7rem;
        color:#666666;
    }
    .noMoreMsg{
        text-align:center;color:#AEAEAE;
        padding:15px;font-size:0.7rem;
    }
    .bg-color{
        -webkit-box-shadow: 0 0px 0px !important;
        box-shadow: 0 0px 0px !important;
    }
    .mui-bar {
        z-index:2;
        background-color: #fff;
        -webkit-box-shadow:none;
        box-shadow:none;
        border-bottom:1px solid #ddd;
    }
    .header_fanhui{
        line-height: 43px;
        font-size: 0.9rem;
        width: 43px;
    }
    p{
      color:#333333!important;
      margin-bottom:4px;
    }
    .info-list{
        width:100%;
        height:auto;
        margin-top:44px;
        margin-bottom:40px;
        .info-top{
            overflow:hidden;
            background:#fff;
            color:#333333;
            font-size:0.7rem;
            padding:8px 12px  8px 12px;
        }
        .info-tab{
          .tab-item{
              width:100%;
              background:#fff;
              overflow:hidden;
              padding:12px 12px 12px 12px;
              .tab-item-left{
                  float:right;
                  width:48%;
                  height:90px;
                  p{
                      line-height:20px;
                      padding-bottom:0px;
                      font-size:0.6rem;
                  }
              }
              .tab-item-right{
                  float:right;
                  width:42%;
                height:90px; 
                  text-align:center;
                  img{
                      height:100%;
                  }
              }
              .tab-item-ipt{
                  width:10%;
                  float:left;
              }
          }
        }
    }




    /**确认按钮*/
    .affirm {
        bottom: 20px;
        left: 5%;
        width: 90%;
        height: 40px;
        position: absolute;
        z-index:999999;
        opacity:0.9;
        .afm {
            height: 40px;
            /**border: 1px solid #ddd;****/
            background-color: #b2b2b2;
            margin: 0 auto;
            color: #fff;
            border-radius: 3px;
            text-align: center;
            line-height: 40px;
            font-size:15px;
        }
    }

   
</style> 

    